<script setup lang="ts">
import { ref } from "vue";

const openAgentModal = ref<boolean>(false);
const selectAgentIndex = ref<number>(0);

// 定义打开Modal方法，父组件利用dom调用该方法，打开
const showAgentModal = () => {
  openAgentModal.value = true
}

const agentList = [
  {
    url: import.meta.env.VITE_ILINKAGENT_URL,
    agentName: '智链langflow Agent',
  },
  {
    url: import.meta.env.VITE_XINGHUO_URL,
    agentName: '讯飞星火',
  },
  {
    url: import.meta.env.VITE_BAIDUAPP_URL,
    agentName: '百度智能云千帆AppBulider',
  },
  {
    url: import.meta.env.VITE_COZE_URL,
    agentName: '扣子',
  },
  {
    url: import.meta.env.VITE_TONGYI_URL,
    agentName: '阿里云百炼',
  },
]

const gotoAgent = () => {
  // 根据选中的下标获取URL并打开
  const url = agentList[selectAgentIndex.value].url;
  // 关闭modal
  openAgentModal.value = false
  window.open(url, '_blank')
}

// 定义暴露的方法
defineExpose({ showAgentModal })
</script>

<template>
  <a-modal v-model:open="openAgentModal" title="选择创建的应用" closable centered ok-text="确认" cancel-text="取消" @ok="gotoAgent">
    <a-radio-group v-model:value="selectAgentIndex">
      <a-radio v-for="(item, idx) in agentList" :key="idx" class="radio-style" :value="idx">
        {{ item.agentName }}
      </a-radio>
    </a-radio-group>
  </a-modal>
</template>

<style lang="scss" scoped>
.radio-style {
  display: flex;
  height: 30px;
  line-height: 30px;
}
</style>
